<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <el-row style="margin-top: 10px;margin-bottom: 10px ">
            <el-col :span="24">
                <div style="text-align: center">
                  <el-upload
                    ref="upload"
                    accept=".xlsx"     
                    action
                    class="upload-demo"
                    drag
                    :on-change="fileChange"
                    :auto-upload="false"
                    :file-list="fileList" 
                    :limit="fileLimit"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">上传表设计文档</div>
                  </el-upload>
                </div>
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px;margin-bottom: 10px ">
            <el-col :span="24">
              <div style="text-align: center">
                  <el-button type="primary" @click="httpRequest">生  成</el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
    export default {
        name: 'file',
        data() {
            return {
                fileList: [],
                file: '',
                fileLimit:1
            }
        },
        methods: {
            // 上传文件
            httpRequest() {
                if (this.file == null) {
                    this.$message.warning('请选择需要上传的文件');
                    return false;
                }
               
                console.log(this.getHttpClient)

                // let params = new FormData();
                // params.append('file', this.file);
                // let config = {
                //     headers: {'Content-Type': 'multipart/form-data'}
                // };
                // this.post('/uploadFile', params, (res) => {
                //     console.log(res)
                //     if (res.code == 0 ) {
                //         this.$message.success('文件上传成功');
                //         //this.$refs.upload.clearFiles();
                //     }
                // });


                let fileFormData = new FormData();
                //this.file 更具不同ui框架获取的file对象,this.file.raw文件的二进制流
                fileFormData.append('file', this.file);
                let requestConfig = {
                //重新设置请求头,考虑服务器处理时间可能过长，加大timeout
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        timeout: 20000,
                    },
                    responseType: 'blob'
                }
                this.getHttpClient().post('/uploadFile', fileFormData, requestConfig).then((res) => {
                  this.$refs.upload.clearFiles();
                  let url = window.URL.createObjectURL(new Blob([res.data]));
                  let link = document.createElement("a");
                  link.style.display = "none";
                  link.href = url;

                  let fileName = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', ''))

                  link.setAttribute("download", fileName); //指定下载后的文件名，防跳转
                  document.body.appendChild(link);
                  link.click();
                    // 释放内存
                  window.URL.revokeObjectURL(link.href)
                })

            },
            fileChange(file, fileList) {
                this.file = file.raw;
                if (fileList.length > 0) {
                     this.form.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
                 }
            },
        },
        created() {
           
        }
    }
</script>
<style scoped>
</style>